#notes {
	$verticalMargin: 4em;
	$listWidth: 10em;
	$horizontalMargin: 1em;
	$smallVerticalMargin: 0.5em;
	position: absolute;
	top: $verticalMargin;
	bottom: $verticalMargin;
	left: $horizontalMargin;
	right: $horizontalMargin;
	.notesList {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: $listWidth;
		.noteInfo {
			@include transition;
			&:hover {
				color: $hoverColor;
			}
		}
	}
	.noteDetails {
		position: absolute;
		left: $listWidth+$horizontalMargin;
		top: 0;
		bottom: 0;
		right: 0;
		div {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			&.controlsWrapper {
				position: absolute;
				top: -$verticalMargin/2;
			}
			&.new, &.edit {
				button {
					position: absolute;
					right: 0;
					bottom: -$verticalMargin+$smallVerticalMargin;
				}
			}
			label {
				$textWidth: 5em;
				display: block;
				margin-bottom: $smallVerticalMargin;
				position: relative;
				top: 0;
				left: 0;
				> input[type="text"], textarea {
					position: absolute;
					left: $textWidth;
					width: calc(100% - #{$textWidth});
				}
				> textarea {
					display: inline-block;
					height: 3em;
					resize: none;
				}
			}
		}
	}
}